<template>
  <el-dialog :visible.sync="dialogVisible" append-to-body width="1200px" title="选择订单" @close="close">
    <el-form ref="query" :model="page.query" inline label-position="right" label-width="80px">
      <el-form-item label="订单编号" prop="orderNo">
        <el-input v-model="page.query.orderNo" placeholder="请输入订单编号" clearable />
      </el-form-item>
      <!--      <el-form-item label="关键字" prop="keyword">
        <el-input v-model="page.query.keyword" placeholder="请输入关键字" clearable />
      </el-form-item>-->
      <el-form-item label="产品名称" prop="productId">
        <product-query ref="productQuery" v-model="page.query.productId" @choose="handleChooseProduct" />
      </el-form-item>
      <el-form-item label="客户名称" prop="customerId">
        <customer-query ref="customerQuery" v-model="page.query.customerId" @choose="handleChooseCustomer" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" :loading="tableLoading" @click="handleSearch">查询</el-button>
        <el-button icon="el-icon-refresh" :loading="tableLoading" @click="resetQueryForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="table"
      v-loading="tableLoading"
      :data="tableData"
      style="width: 100%"
      border
      @row-dblclick="tableDbClick"
      @selection-change="handleSelect"
    >
      <el-table-column type="selection" width="45" />
      <el-table-column width="45">
        <template slot-scope="scope">
          <svg-icon v-if="scope.row.priority==='1'" icon-class="jiaji" style="font-size: 20px;width:20px;display: inline;" />
          <svg-icon v-if="scope.row.priority==='0'" icon-class="putong" style="font-size: 17px;width:20px;display: inline;" />
        </template>
      </el-table-column>
      <el-table-column label="订单编号" prop="orderNo" min-width="110" />
      <el-table-column label="订单日期" prop="orderDate" min-width="110" />
      <el-table-column label="客户名称" prop="customerName" min-width="100" />
      <el-table-column label="产品名称" prop="productName" min-width="200" />
      <el-table-column label="数量" prop="quantity" min-width="80">
        <template slot-scope="scope">
          <div class="txt">{{ scope.row.quantity }} {{ scope.row.unit }}</div>
        </template>
      </el-table-column>
      <!--      <el-table-column label="含税总额" prop="amount" min-width="120">
        <template slot-scope="scope">
          <money-format v-model="scope.row.amount" />
        </template>
      </el-table-column>-->
      <el-table-column label="订单状态" prop="orderState" min-width="80">
        <template slot-scope="scope">
          <sale-order-state-tag v-model="scope.row.orderState" />
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="70">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleChoose(scope.row)"
          >选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="close">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
    <el-pagination
      :page-sizes="[10, 30, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>
<script>
import { order_page } from '@/api/sale/order'

export default {
  name: 'SaleOrderModule',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    query: {
      type: Object,
      default() {
        return { productId: '',
          orderState: '',
          customerId: '',
          paymentStateList: [],
          orderStateList: [],
          shipmentStateList: []
        }
      }
    }
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      selected: [],
      dialogVisible: this.visible,
      page: {
        page: 1,
        size: 10,
        total: 0,
        query: {
          keyword: '',
          productId: this.query.productId,
          orderState: this.query.orderState,
          customerId: this.query.customerId,
          paymentStateList: this.query.paymentStateList,
          orderStateList: this.query.orderStateList,
          shipmentStateList: this.query.shipmentStateList
        }
      }
    }
  },
  methods: {
    handleSearch() {
      this.page.page = 1
      this.doPage()
    },
    doPage() {
      // 分页查询
      this.tableLoading = true
      order_page(this.page).then(resp => {
        if (resp.success) {
          const data = resp.data.records.map(item => {
            item.isEdit = false
            return item
          })
          this.tableData = data
          this.page.total = resp.data.total
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    // 选中事件
    handleSelect(row) {
      this.selected = []
      if (!this.multiple) {
        if (row.length > 1) {
          this.$refs.table.clearSelection()
          this.$refs.table.toggleRowSelection(row[row.length - 1])
        }
        this.selected = [row[row.length - 1]]
      } else {
        this.selected = row
      }
    },
    tableDbClick(row) {
      if (this.multiple) {
        this.$emit('close', [row])
      } else {
        this.$emit('close', row)
      }
    },
    handleChoose(row) {
      if (this.multiple) {
        this.$emit('close', [row])
      } else {
        this.$emit('close', row)
      }
    },
    handleConfirm() {
      if (this.selected.length === 0) {
        this.$message.warning('请勾选订单')
        return
      }
      if (this.multiple) {
        this.$emit('close', this.selected)
      } else {
        this.$emit('close', this.selected[0])
      }
    },
    close() {
      this.$emit('close', null)
    },
    resetQueryForm() {
      this.$refs.query.resetFields()
      this.$refs.productQuery.resetQueryForm()
      this.$refs.customerQuery.resetQueryForm()
      this.doPage()
    },
    // 分页大小
    handleSizeChange(val) {
      this.page.size = val
      this.doPage()
    },
    // 页码
    handleCurrentChange(val) {
      this.page.page = val
      this.doPage()
    },
    handleChooseCustomer(row) {
      if (row) {
        this.page.query.customerId = row.id
      }
    },
    handleChooseProduct(row) {
      if (row) {
        this.page.query.productId = row.id
      }
    }
  }
}
</script>

<style scoped>

</style>
